<template>
    <div class="draw">
        <div class="left">
            <ul class="tool">
                <li :class="['tool-item', { active: curType === item.type }]" v-for="(item, index) in drawList" :key="index">
                    <div class="img" :title="item.title" @click="setType(item.type)">
                        <img :src="item.icon" alt="" />
                    </div>
                </li>
            </ul>
            <ul class="tool">
                <li :class="['tool-item']">
                    <div @click="addDGProvince">广东省边界</div>
                </li>
            </ul>
            <DrawCtrl ref="drawCtrl"></DrawCtrl>
            <Select></Select>
            <GDNavigation v-model="curType" ref="gdNavigation"></GDNavigation>
            <div class="popup" title="Welcome to OpenLayers" style="display: block">
                <img src="../../assets/images/gif.gif" alt="" />
            </div>
        </div>
        <div class="right">
            <!-- 创建图层 -->
            <div class="map-box">
                <div id="map"></div>
                <!-- <div id="mouse-position">位置：层级：{{layerZIndex}}</div> -->
                <div class="popup" title="Welcome to OpenLayers" style="display: none">
                    <img src="../../assets/images/gif.gif" alt="" />
                </div>
                <RoadDetailPop class="road-overlay" style="display: none"></RoadDetailPop>
                <CtrlTool v-model="editStatus" class="map-tool"></CtrlTool>
            </div>
        </div>
    </div>
</template>

<script>
import olMap from '../../util/lmap/lmap.js' // 引入地图包对象
import CtrlTool from '../../components/CtrlTool.vue'
import dgJson from '../../util/json/gdProvince.json'
import DrawCtrl from './DrawCtrl.vue'
import Select from './Select.vue'
import GDNavigation from './GDNavigation.vue'
import RoadDetailPop from './components/RoadDetailPop.vue'
import { mapState } from 'vuex'
export default {
    components: {
        CtrlTool,
        DrawCtrl,
        Select,
        GDNavigation,
        RoadDetailPop
    },
    data() {
        return {
            lonlat: '',
            zoom: '',
            graticule: null,
            drawList: [
                {
                    title: '添加点到地图',
                    icon: require('../../assets/images/position.png'),
                    type: 'point'
                },
                {
                    title: '添加overlay到地图',
                    icon: require('../../assets/images/gif.gif'),
                    type: 'overlay'
                },
                {
                    title: '绘制线段',
                    icon: require('../../assets/images/line.png'),
                    type: 'line'
                },
                {
                    title: '绘制多边形',
                    icon: require('../../assets/images/polygon.png'),
                    type: 'polygon'
                }
            ],
            curType: '', // 当前选中的绘制图层按钮
            handlerFunc: null,
            vectorLayer: null, // 绘制图层对象
            GeoJsonVector: null, // geojson图层
            ctrlToolShow: false, // 要素控制状态
            ctrlTool: {
                // 要素位置
                top: '0px',
                left: '0px'
            },
            layerZIndex: 12,
            overlayList: {}, // overlay对象
            editStatus: false
        }
    },
    computed: {
        ...mapState({
            overlays: (state) => state.map.editOverlays
        })
    },
    methods: {
        setType(type) {
            this.curType = this.curType === type ? '' : type
            if (this.curType === 'line') {
                this.drawLine()
            } else if (this.curType === 'polygon') {
                this.drawPolygon()
            }
        },
        mapClick(e) {
            console.log('66-,', e)
            let lonlat = olMap.utils.transform(olMap.utils.mousePageLonlat(e), true)
            console.log('lont--', lonlat)
            let existFeature = olMap.map.forEachFeatureAtPixel(e.pixel, (feature) => {
                console.log(feature)
                let name = feature.get('name')
                let pixel = olMap.utils.mousePageLonlat(e)
                if (feature.get('name') === '江门市') {
                    this.$updateParams(['map', { select: { curClickFeature: feature, layer: this.GeoJsonVector } }])
                } else if (feature.get('name') === 'gd-point') {
                    this.$refs.gdNavigation.setTipPoint(feature)
                } else if (feature.get('name') === 'e-draw') {
                    this.$updateParams([
                        'map',
                        {
                            select: {
                                curClickFeature: feature,
                                layer: this.$refs.drawCtrl.draw.layer
                            }
                        }
                    ])
                    this.showCtrlTool(lonlat, feature)
                } else if (name.indexOf('edit') === -1) {
                    this.$updateParams(['map', { select: { curClickFeature: feature, layer: this.vectorLayer } }])
                    this.showCtrlTool(lonlat, feature)
                }
                // if (this.curType) {
                //     this.showCtrlTool(pixel)
                // }
                return feature
            })
            if (!existFeature) {
                if (this.curType === 'point') {
                    this.drawPoint(lonlat)
                } else if (this.curType === 'overlay') {
                    this.drawOverlay(lonlat)
                }
            }
        },
        // 绘制点
        drawPoint(lonlat) {
            let style = {
                isIcon: true,
                icon: {
                    src: require('../../assets/images/position.png'),
                    size: [40, 50],
                    scale: 0.8,
                    offset: [0, 0]
                }
            }
            olMap.polygon.drawPolygon(this.vectorLayer, style, lonlat, 'point', {
                name: 'e-point'
            })
            // this.vectorLayer.setVisible(true)
        },
        // 绘制overlay
        drawOverlay(lonlat) {
            let element = document.querySelector('.popup')
            let box = element.cloneNode(true)
            box.addEventListener(
                'click',
                (e) => {
                    console.log('+++', e)
                    let popItem = e.path.find((item) => {
                        return item.className.indexOf('popup') > -1
                    })
                    if (popItem) {
                        let name = popItem.className.substring(6)
                        let pixel = olMap.utils.getLonLat(e)
                        console.log('overlay', pixel)
                        this.$updateParams([
                            'map',
                            {
                                select: {
                                    curClickFeature: this.overlayList[name],
                                    layer: null
                                }
                            }
                        ])
                        this.showCtrlTool(pixel)
                        console.log('555', this.overlayList, name)
                    }
                },
                false
            )
            let className = this.strLen()
            box.classList.add(className)
            let overlay = olMap.overlay.drawOverlay(olMap.map, box, lonlat, {
                name: 'e-overlay'
            })
            console.log('overlay', overlay)
            this.overlayList[className] = overlay
        },
        // 绘制线条
        drawLine() {
            let coordinate = [
                [234.8, 53.75],
                [266.44, 50.75],
                [261.59, 36.05],
                [234.8, 53.75]
            ]
            let style = {
                stroke: {
                    color: '#ffcc33',
                    width: 2
                }
            }
            olMap.polygon.drawPolygon(this.vectorLayer, style, coordinate, 'line', {
                name: 'e-line'
            })
        },
        // 绘制多边形
        drawPolygon() {
            let coordinate = [
                [234.8, 53.75],
                [266.44, 50.75],
                [261.59, 36.05],
                [236.77, 37.57]
            ]
            let style = {
                stroke: {
                    color: '#ffcc33',
                    width: 2
                },
                fill: {
                    color: 'rgba(85, 170, 255, 0.6)'
                }
            }
            olMap.polygon.drawPolygon(this.vectorLayer, style, coordinate, 'polygon', { name: 'e-polygon' })
        },
        // 添加geojson
        addDGProvince() {
            console.log('das', dgJson)
            olMap.feature.format({
                type: 'geojson',
                data: dgJson,
                layer: this.GeoJsonVector
            })
            olMap.utils.panTo(olMap.map, [473.07, 22.56], 6)
        },
        // 显示工具栏
        showCtrlTool(lonlat, feature) {
            console.log('feature', feature)
            let dom = document.querySelector('.map-tool')
            console.log('dom', dom)
            dom.style.display = 'block'
            let overlay = olMap.overlay.drawOverlay(
                olMap.map,
                dom,
                lonlat,
                { name: 'edit-tool-overlay' },
                {
                    positioning: 'bottom-left'
                    // offset: [-25, -28]
                }
            )
            this.editStatus = false
            if (this.overlays && this.overlays.length > 0) {
                this.overlays.map((item) => {
                    olMap.map.removeOverlay(item)
                })
            }

            this.$updateParams(['map', { editOverlays: [overlay] }])
            // let dom = document.querySelector('.road-overlay').cloneNode(true)
            // dom.style.display = 'block'
            // let content = dom.querySelector('.content')
            // console.log(content)
            // content.innerText = 'ceshi---'
            // let overlay = olMap.overlay.drawOverlay(olMap.map, dom, lonlat, {name: 'gd-point-overlay'}, {
            //     positioning: 'bottom-left',
            //     offset: [-25, -28]
            // })
        },
        /**
         * 获取16位的随机串
         * */
        strLen() {
            var str = ''
            for (var i = 0; i < 16; i++) {
                str += Math.floor(Math.random() * 15 + 1).toString(16)
            }
            return str
        }
    },
    mounted() {
        this.$nextTick(() => {
            let layer = olMap.createWmtsMap()
            olMap.createMap('map')
            olMap.map.addLayer(layer)
            olMap.map.addControl(olMap.utils.showMousePosition('mouse-position'))
            olMap.map.on('singleclick', this.mapClick)
            this.vectorLayer = olMap.layer.Vector(olMap.map)
            this.vectorLayer.setZIndex(999)
            this.GeoJsonVector = olMap.layer.GeoJsonVector(olMap.map)
            this.GeoJsonVector.setZIndex(998)
            this.$updateParams(['map', { map: olMap.map }])
            this.$updateParams([
                'map',
                {
                    layers: {
                        vectorLayer: this.vectorLayer,
                        GeoJsonVector: this.GeoJsonVector
                    }
                }
            ])
            olMap.map.on('moveend', (e) => {
                this.layerZIndex = olMap.map.getView().getZoom()
                console.log('移动', this.layerZIndex)
            })
        })
    }
}
</script>

<style scoped lang="less">
@bd-bg: #55aaff;

#map {
    width: 100%;
    height: 100%;
}

.draw {
    display: flex;
    height: 100%;

    .left {
        width: 260px;
        height: 100%;
        border-right: 1px solid @bd-bg;

        .tool {
            &:nth-of-type(1) {
                .tool-item {
                    width: 50px;
                }
            }
        }
    }

    .right {
        flex: 1 1 auto;

        .map-box {
            position: relative;
            height: 100%;

            .map-tool {
                position: relative;
                // top: 10px;
                // left: 10px;
            }
        }
    }
}

#mouse-position {
    position: absolute;
    top: 0;
    color: @bd-bg;
}

.popup {
    width: 60px;
    height: 60px;

    img {
        width: 100%;
    }
}
</style>
